import './style.scss'
import React, { useCallback, useState } from 'react'
import type { FC } from 'react'
import DataForm from './ui/DataForm'
import DataTable from './ui/DataTable'
import { Divider } from 'antd'
import { useRoleList } from '@/hooks/useRole'
import { useSearchParams } from 'react-router-dom'

const Role: FC = () => {
  const [search, setSearch] = useSearchParams()
  const [page, setPage] = useState(() => {
    return search.get('page') ? Number(search.get('page')) : 1
  })
  const setPageNum = useCallback((pageNum: number) => {
    setPage(pageNum)
  }, [])

  const [role, setRole] = useState<IRoleType.IRole>({} as IRoleType.IRole)
  const setRoleHandle = useCallback((item: IRoleType.IRole) => {
    setRole(item)
  }, [])

  const [total, data, loadData] = useRoleList(page)
  return (
    <div className="role-box">
      <DataForm role={role} setRoleHandle={setRoleHandle} />
      <Divider />
      <DataTable
        total={total}
        data={data}
        loadData={loadData}
        page={page}
        setPageNum={setPageNum}
        setSearch={setSearch}
        setRoleHandle={setRoleHandle}
      />
    </div>
  )
}

export default Role
